<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>添加角色</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="/oauthplatform/static/css/x-admin/font.css">
    <link rel="stylesheet" href="/oauthplatform/static/css/x-admin/xadmin.css">
    <link rel="stylesheet" href="/oauthplatform/static/lib/zTree/css/zTreeStyle/zTreeStyle.css">
    <style>
        .layui-textarea {
            display: block;
            width: 70%;
            padding-left: 10px;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form" id="dataForm">

            <div class="layui-form-item">
                <label class="layui-form-label">学校名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="schoolName" required lay-verify="required" placeholder="请输入学校名称"
                           autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">必填</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">校训</label>
                <div class="layui-input-inline">
                    <input type="text" name="schoolMotto" placeholder="校训" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">可选</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">办学类型</label>
                <div class="layui-input-inline">
                    <select name="type" lay-verify="required">
                        <option value="公办">公办</option>
                        <option value="民办">民办</option>
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux">必选</div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">主管部门</label>
                <div class="layui-input-inline">
                    <select name="departmentId" lay-verify="required" id="deptSelect">
                        <option value="">请选择</option>
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux">必选</div>
            </div>

            <!-- 省份选择框 -->
            <div class="layui-form-item">
                <label class="layui-form-label">选择省份</label>
                <div class="layui-input-inline">
                    <select id="provinceSelect" lay-filter="province" required lay-verify="required">
                        <option value="">请选择省份</option>
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux">必选</div>
            </div>


            <!-- 城市选择框 -->
            <div class="layui-form-item">
                <label class="layui-form-label">选择城市</label>
                <div class="layui-input-inline">
                    <select id="citySelect" lay-filter="city" required lay-verify="required">
                        <option value="">请选择城市</option>
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux">必选</div>
            </div>


            <!-- 区/县选择框 -->
            <div class="layui-form-item">
                <label class="layui-form-label">选择区/县</label>
                <div class="layui-input-inline">
                    <select id="countySelect" lay-filter="county" required lay-verify="required">
                        <option value="">请选择区/县</option>
                    </select>
                </div>
                <div class="layui-form-mid layui-word-aux">必选</div>
            </div>

            <!-- 完整地址显示 -->
            <div class="layui-form-item">
                <label class="layui-form-label">所在地区</label>
                <div class="layui-input-inline">
                    <input type="text" id="areaInput" name="address" required lay-verify="required" readonly
                           class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">层次</label>
                <div class="layui-input-block">
                    <input lay-filter="nature" type="radio" name="layer" value="中职" title="中职">
                    <input lay-filter="nature" type="radio" name="layer" value="高职(专科)" title="高职(专科)" >
                    <input lay-filter="nature" type="radio" name="layer" value="职业本科" title="职业本科" >
                </div>
            </div>




            <div class="layui-form-item schoolType" style="display: none">
                <label class="layui-form-label">学校类别</label>
                <div class="layui-input-inline">
                    <select id="schoolNature" name="nature">
                    </select>
                </div>
            </div>




            <div class="layui-form-item nature" style="display: none">
                <label class="layui-form-label">性质类别</label>
                <div class="layui-input-inline">
                    <select id="nature" name="nature">
                    </select>
                </div>
            </div>


            <div class="layui-form-item evaluationType" style="display: none">
                <label class="layui-form-label">评估类型</label>
                <div class="layui-input-inline">
                    <select id="assess" name="assess" lay-verify="required">
                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-inline">
                    <select name="isValid" lay-verify="required">
                        <option value="1">在办</option>
                        <option value="0">停办</option>
                    </select>
                </div>
            </div>


            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
            <input type="hidden" value="add" name="tag">
        </form>

    </div>
</div>
<script type="text/javascript" src="/oauthplatform/static/lib/layui/layui.all.js" charset="utf-8"></script>
<script type="text/javascript" src="/oauthplatform/static/lib/jquery/jquery.3.4.1.js"></script>
<script type="text/javascript" src="/oauthplatform/static/lib/x-admin/xadmin.js"></script>
<script src="/oauthplatform/static/lib/other/html5.min.js"></script>
<script src="/oauthplatform/static/lib/other/respond.min.js"></script>
<script src="/oauthplatform/static/lib/zTree/js/jquery.ztree.all.js"></script>
<script type="application/javascript">

    // 动态加载城市数据
    function loadCities(provinceId) {
        $.ajax({
            url: '/oauthplatform/area/cities/' + provinceId,
            method: 'GET',
            dataType: 'json',
            success: function (data) {
                renderSelectOptions('#citySelect', data);
            },
            error: function (error) {
                console.error('Ajax请求失败', error);
            }
        });
    }

    // 动态加载区/县数据
    function loadCounties(cityId) {
        $('#countySelect').val('');
        $('#areaInput').val('');

        $.ajax({
            url: '/oauthplatform/area/counties/' + cityId,
            method: 'GET',
            dataType: 'json',
            success: function (data) {
                renderSelectOptions('#countySelect', data);
            },
            error: function (error) {
                console.error('Ajax请求失败', error);
            }
        });
    }

    // 清除并渲染完整地址
    function clearAndRenderArea() {
        renderArea();
    }

    // 渲染完整地址
    function renderArea() {
        var provinceName = $('#provinceSelect option:selected').text();
        var cityName = $('#citySelect option:selected').text();
        var countyName = $('#countySelect option:selected').text();

        var areaInput = $('#areaInput');
        var areaText = provinceName + ' ' + cityName + ' ' + countyName;
        areaInput.val(areaText);
    }

    // 渲染下拉框选项
    function renderSelectOptions(selector, data) {
        var select = $(selector);
        select.empty();
        select.append($('<option>', {
            value: '',
            text: '请选择'
        }));
        console.log(data)
        $.each(data, function (index, item) {
            console.log(item)
            console.log(item.areaName)
            select.append($('<option>', {
                value: item.areaId,
                text: item.areaName
            }));
        });
        // 渲染layui表单
        layui.form.render('select');
    }

    function getNature(schoolType,status) {

        $.ajax({
            url: '/oauthplatform/nature/all/' + schoolType,
            method: 'GET',
            dataType: 'json',
            success: function (data) {
                renderNature(status, data);
            },
            error: function (error) {
                console.error('Ajax请求失败', error);
            }
        });
    }
    function renderNature(selector, data) {
        var select = $(selector);
        select.empty();
        select.append($('<option>', {
            value: '',
            text: '请选择'
        }));
        console.log(data)
        $.each(data, function (index, item) {
            console.log(item)
            console.log(item.areaName)
            select.append($('<option>', {
                value: item.assess,
                text: item.assess
            }));
        });
        // 渲染layui表单
        layui.form.render('select');
    }
    // 提交表单数据
    function submitData(data) {


    }

    layui.use(['form','jquery'], function () {
        var $ = layui.jquery;

        // 省份选择事件
        var form = layui.form;
        //监听下拉框选择事件
        form.on('select(province)', function (data) {
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
            loadCities(data.value);
            clearAndRenderArea();
        });
        // 城市选择事件
        form.on('select(city)', function (data) {
            console.log(data.elem); //得到select原始DOM对象
            console.log(data.value); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象
            loadCounties(data.value);
            clearAndRenderArea();
        });
        // 区/县选择事件
        form.on('select(county)', function (data) {
            clearAndRenderArea();
        });


        form.on('radio(nature)', function(data){
            if(data.value=="中职"){
                $(".schoolType").show();
                $(".nature").hide();
                $(".evaluationType").show();
                getNature(1,'#schoolNature');
            }
            if(data.value=="高职(专科)"|| data.value=="职业本科"){
                $(".nature").show();
                $(".schoolType").hide();
                $(".evaluationType").show();
                getNature(2,'#nature');
            }
            getNature(0,"#assess")
        });


        //监听提交
        form.on('submit(formDemo)', function(data){
            // layer.msg(JSON.stringify(data.field));
            let json = JSON.stringify(data.field);
            console.log(data.field)
            console.log(json)
            //submitData(json);
            $.ajax({
                url: '/oauthplatform/school/save',
                method: 'POST',
                //dataType: 'json',
                contentType:'application/json;charset=UTF-8',
                data: json,
                success: function (res) {

                    layer.msg(res.msg);
                    if(parseInt(res.code) == 200){
                        setTimeout(function(){ xadmin.close(); xadmin.father_reload(); }, 900);
                    }
                    // console.log(data)
                    // if (data.code == 200){
                    //
                    //     layer.msg(data.msg);
                    //     //关闭窗口
                    //
                    // }else {
                    //     layer.msg(data.msg);
                    // }

                },
                error: function (error) {
                    console.error('Ajax请求失败', error);
                }
            });
            //
            // $.post(
            //     //接口
            //     '/oauthplatform/school/save',
            //     //数据
            //     data.field,
            //     //回调
            //     function (data) {
            //         // console.log(data)
            //         layer.msg(data);
            //     },
            //     //返回类型
            //     'json'
            // );

            return false;
        });

    })

    $(document).ready(function () {


        // 使用Ajax从服务器获取数据
        $.ajax({
            url: '/oauthplatform/eduManage/all',
            method: 'GET',
            success: function (data) {
                // 数据获取成功后填充下拉列表
                populateDropdown(data.data);
                console.log("获取的信息" + data.data);
            },
            error: function (error) {
                console.error('Ajax请求失败', error);
            }
        });

        // Function to populate the dropdown
        function populateDropdown(data) {
            var select = $('#deptSelect');
            select.empty(); // 清空现有选项

            // 添加默认选项
            select.append($('<option>', {
                value: '',
                text: '请选择'
            }));

            // 根据数据添加选项
            $.each(data, function (index, item) {
                select.append($('<option>', {
                    value: item.departmentId,
                    text: item.name
                }));
            });

            // 渲染layui表单
            // layui.form.render('select');
        }

        // 渲染所在地开始
        // 初始化省份选项
        loadProvinces();


        // 动态加载省份数据
        function loadProvinces() {
            $.ajax({
                url: '/oauthplatform/area/provinces',
                method: 'GET',
                dataType: 'json',
                success: function (data) {
                    renderSelectOptions('#provinceSelect', data);
                },
                error: function (error) {
                    console.error('Ajax请求失败', error);
                }
            });
        }
// 选择所在地结束
    });

</script>
</html>